import { Pagination } from '#/antd'
import { BaseTableState } from '#/core'
import {
  AuditStatus,
  Author,
  QueryAuthorReq,
  Source,
} from '@/api/audit/auth/model/authorModel'
import { AuthorApi, fetchAuthList } from '@/api/premium/content/author'
import { FormItemOption } from '@/components/Form/types'
import useFormat from '@/hooks/serviceLogic/useFormat'
import { useStore } from '@/store'
import { formatPagination } from '@/utils/antdOpFormatHelper'
import { cloneDeep } from 'lodash-es'
import { computed, reactive, ref } from 'vue'
import { SearchAuthorForm } from '../types'

const useSearchAuthor = () => {
  const store = useStore()
  const { fromatContractStatus, fromatAuthSource } = useFormat()
  const searchAuthorForm: SearchAuthorForm = {
    id: '',
    name: '',
    email: '',
    phone: '',
    source: Source.PLUS,
  }

  const queryFormBind = reactive({
    model: cloneDeep(searchAuthorForm),
  })

  const queryFormList: FormItemOption<SearchAuthorForm>[] = [
    {
      formProps: {
        label: '作者id',
        name: 'id',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入作者id',
        },
      },
    },
    {
      formProps: {
        label: '作者名称',
        name: 'name',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入作者名称',
        },
      },
    },
    {
      formProps: {
        label: '作者邮箱',
        name: 'email',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入作者邮箱',
        },
      },
    },
    {
      formProps: {
        label: '作者手机',
        name: 'phone',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入作者手机',
        },
      },
    },
    {
      formProps: {
        label: '作者来源',
        name: 'source',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '选择作者来源',
        },
        children: [
          { tag: 'a-select-option', content: '全部', props: { value: null } },
          { tag: 'a-select-option', content: 'plus', props: { value: 1 } },
          { tag: 'a-select-option', content: 'dp', props: { value: 2 } },
          { tag: 'a-select-option', content: '优图', props: { value: 3 } },
          { tag: 'a-select-option', content: '开篇', props: { value: 4 } },
        ],
      },
    },
    {
      formProps: {
        label: '签约状态',
        name: 'contractStatus',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '选择签约状态',
        },
        children: [
          { tag: 'a-select-option', content: '全部', props: { value: null } },
          { tag: 'a-select-option', content: '正常', props: { value: 0 } },
          { tag: 'a-select-option', content: '解约', props: { value: 1 } },
          { tag: 'a-select-option', content: '再签', props: { value: 2 } },
        ],
      },
    },
  ]

  const tableStateWrapper = reactive<BaseTableState<Author>>({
    tableSize: 'small',
    selectedRowKeys: [],
    tableData: [],
    tableColumns: [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '登录名',
        dataIndex: 'name',
      },
      {
        title: '昵称',
        dataIndex: 'nick',
        customRender: ({ text }) => text || '暂无',
      },
      {
        title: '手机',
        dataIndex: 'phone',
        customRender: ({ text }) => text || '暂无',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        customRender: ({ text }) => text || '暂无',
      },
      {
        title: '作者来源',
        dataIndex: 'source',
        customRender: ({ text }) => fromatAuthSource(text),
      },
      {
        title: '来源ID',
        dataIndex: 'sourceId',
      },
      {
        title: '签约状态',
        dataIndex: 'contractStatus',
        customRender: ({ text, record }) => {
          if (record.status !== AuditStatus.ACCESS) {
            return '-'
          }
          return fromatContractStatus(text)
        },
      },
      {
        title: '操作',
        dataIndex: 'options',
        width: 50,
        slots: {
          customRender: 'options',
        },
      },
    ],
  })

  const pageInfo = ref<Pagination>({
    current: 1,
    pageSize: 20,
    total: 0,
  })

  const getAuthorList = async () => {
    const reqData: QueryAuthorReq = {
      ...queryFormBind.model,
      current: pageInfo.value.current,
      size: pageInfo.value.pageSize,
    }
    const { data } = await fetchAuthList(reqData)
    tableStateWrapper.tableData = data.records
    pageInfo.value = formatPagination(data)
  }
  const fetchAuthListLoading = computed(() =>
    store.getters['global/isOpLoading'](AuthorApi.QUERY_AUTH)
  )

  const rowSelection = {
    onChange: (selectedRowKeys: string[], selectedRows: Author[]) => {
      console.log(
        'selectedRowKeys:',
        selectedRowKeys,
        'selectedRows: ',
        selectedRows
      )
      tableStateWrapper.selectedRowKeys = selectedRowKeys
    },
  }
  const pageChange = async (page: number) => {
    pageInfo.value.current = page
    await getAuthorList()
  }
  const pageSizeChange = async (current: number, pageSize: number) => {
    pageInfo.value.current = current
    pageInfo.value.pageSize = pageSize
    await getAuthorList()
  }
  const formatTotalPageText = (total: number) => `共 ${total} 个`

  return {
    queryFormBind,
    queryFormList,
    fetchAuthListLoading,
    getAuthorList,
    tableStateWrapper,
    rowSelection,
    pageInfo,
    pageChange,
    pageSizeChange,
    formatTotalPageText,
  }
}

export default useSearchAuthor
